<div>
    <form name="userCreateOrEditForm" role="form" novalidate class="form-validation">
        <div class="modal-header">
            <h4 class="modal-title">
                <span ng-if="vm.user.id">@L("EditUser"): {{vm.user.userName}}</span>
                <span ng-if="!vm.user.id">@L("CreateNewUser")</span>
            </h4>
        </div>
        <div class="modal-body">
            <tabset class="tab-container tabbable-line">
                <tab heading="@L("UserInformations")">

                    <div class="row">
                        <div class="col-sm-4 text-center">
                            <img ng-if="vm.profilePictureId" ng-src="@Url.Action("GetProfilePictureById", "Profile")?id={{vm.profilePictureId}}" width="128" height="128" class="img-thumbnail img-rounded user-edit-dialog-profile-image" />
                            <img ng-if="!vm.profilePictureId" src="@Url.Content("~/Common/Images/default-profile-picture.png")" width="128" height="128" class="img-thumbnail img-rounded user-edit-dialog-profile-image" />
                        </div>
                        <div class="col-sm-8">
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <input class="form-control" type="text" name="Name" ng-class="{'edited':vm.user.name}" ng-model="vm.user.name" required maxlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxNameLength">
                                <label>@L("Name")</label>
                            </div>

                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <input type="text" name="Surname" class="form-control" ng-class="{'edited':vm.user.surname}" ng-model="vm.user.surname" required maxlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxSurnameLength">
                                <label>@L("Surname")</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="email" name="EmailAddress" class="form-control" ng-class="{'edited':vm.user.emailAddress}" ng-model="vm.user.emailAddress" required maxlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxEmailAddressLength">
                        <label>@L("EmailAddress")</label>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label">
                        <input type="text" ng-disabled="!vm.canChangeUserName" ng-class="{'edited':vm.user.userName}" name="UserName" class="form-control" ng-model="vm.user.userName" required maxlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxUserNameLength">
                        <label>@L("UserName")</label>
                        <span class="help-block" ng-show="!vm.canChangeUserName">@L("CanNotChangeAdminUserName")</span>
                    </div>

                    <div class="md-checkbox-list">
                        <div class="md-checkbox">
                            <input id="EditUser_SetRandomPassword" class="md-check" type="checkbox" name="SetRandomPassword" ng-model="vm.setRandomPassword">
                            <label for="EditUser_SetRandomPassword">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                @L("SetRandomPassword")
                            </label>
                        </div>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label no-hint" ng-if="!vm.setRandomPassword">
                        <input type="password" name="Password" class="form-control" ng-model="vm.user.password" ng-required="!vm.user.id && !vm.setRandomPassword" maxlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxPlainPasswordLength" ng-minlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MinPlainPasswordLength">
                        <label>@L("Password")</label>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label no-hint" ng-if="!vm.setRandomPassword">
                        <input type="password" name="PasswordRepeat" class="form-control" ng-model="vm.user.passwordRepeat" ng-required="!vm.user.id && !vm.setRandomPassword" maxlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MaxPlainPasswordLength" ui-validate=" '$value==vm.user.password' " ui-validate-watch=" 'vm.user.password' " ng-minlength="@MyCompanyName.AbpZeroTemplate.Authorization.Users.User.MinPlainPasswordLength">
                        <label>@L("PasswordRepeat")</label>
                    </div>

                    <div class="md-checkbox-list">
                        <div class="md-checkbox">
                            <input id="EditUser_ShouldChangePasswordOnNextLogin" class="md-check" type="checkbox" name="ShouldChangePasswordOnNextLogin" ng-model="vm.user.shouldChangePasswordOnNextLogin">
                            <label for="EditUser_ShouldChangePasswordOnNextLogin">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                @L("ShouldChangePasswordOnNextLogin")
                            </label>
                        </div>
                        <div class="md-checkbox">
                            <input id="EditUser_SendActivationEmail" class="md-check" type="checkbox" name="SendActivationEmail" ng-model="vm.sendActivationEmail">
                            <label for="EditUser_SendActivationEmail">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                @L("SendActivationEmail")
                            </label>
                        </div>
                        <div class="md-checkbox">
                            <input id="EditUser_IsActive" class="md-check" type="checkbox" name="IsActive" ng-model="vm.user.isActive">
                            <label for="EditUser_IsActive">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                @L("Active")
                            </label>
                        </div>
                    </div>
                </tab>
                <tab>
                    <tab-heading>
                        @L("Roles") <b class="badge badge-primary">{{vm.getAssignedRoleCount()}}</b>
                    </tab-heading>
                    <div class="md-checkbox-list">
                        <div class="md-checkbox" ng-repeat="role in vm.roles">
                            <input id="EditUser_{{role.roleName}}" class="md-check" type="checkbox" name="{{role.roleName}}" ng-model="role.isAssigned">
                            <label for="EditUser_{{role.roleName}}">
                                <span class="inc"></span>
                                <span class="check"></span>
                                <span class="box"></span>
                                {{role.roleDisplayName}}
                            </label>
                        </div>
                    </div>
                </tab>
            </tabset>
        </div>
        <div class="modal-footer">
            <button ng-disabled="vm.saving" type="button" class="btn btn-default" ng-click="vm.cancel()">@L("Cancel")</button>
            <button type="submit" button-busy="vm.saving" busy-text="@L("SavingWithThreeDot")" class="btn btn-primary blue" ng-click="vm.save()" ng-disabled="userCreateOrEditForm.$invalid"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
        </div>
    </form>
</div>